<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}

.leftButton {
  position: absolute;
  top: 51%;
  transform: translateY(-51%);
}

.el-button.is-circle {
  border-radius: 0%;
}

.el-button--mini.is-circle {
  padding: 4px;
}

.rule_tree_root {
  width: 25px;
  display: flex;
  /*margin: 20px 10px;*/
}

.rule_tree {
  display: flex;
  flex-direction: column;
  justify-content: center;

  width: 40px;
  margin-right: 12px;
}

.rule_tree_top {
  width: 90%;
  top: 15px;
  position: relative;
  flex-grow: 2;

  margin-left: 11px;
  margin-bottom: 15px;

  border-radius: 1px;
  border-left: 1px solid #d3dce6;
  border-top: 1px solid #d3dce6;
  border-bottom: 1px solid #d3dce6;
}

.rule_tree_bottom {
  width: 100%;
  bottom: 15px;
  position: relative;
  /*flex-grow: 2;*/

  margin-left: 16px;
  margin-top: 15px;

  border-left: 1px solid #d3dce6;
  border-radius: 1px;
  /*border-bottom: 1px solid #d3dce6;*/
}

</style>
<template>
  <div>
    <div v-if="showSelf">
      <el-button :disabled="toDisabled" type="success" size="small" @click="addNewRule">添加规则配置(或)</el-button>
      <el-row :class="'rule_tree_root'">
        <el-col class="rule_tree" v-if="needShowOr(ruleListInfo.conditions)">
          <div class="rule_tree_top"></div>
          <el-button
            class="leftButton"
            size="mini"
            type="success"
            circle
          >或
          </el-button>
          <div class="rule_tree_bottom"></div>
        </el-col>
        <el-col>
          <div v-for="(condition,groupIndex) in ruleListInfo.conditions" :key="groupIndex">
            <rule-tree-node style="text-align: left;"
                            :root="true"
                            :group="condition.group"
                            :rule-mode="ruleMode"
                            :to-disabled="toDisabled"
                            :conditions="ruleListInfo.conditions"
                            :selectors="selectors">
            </rule-tree-node>
          </div>
        </el-col>
      </el-row>
      <!-- TODO 翻译规则，以伪代码-->
      <!--      <el-divider></el-divider>-->
      <!--      <el-button type="primary" style="color: white;background-color: black;border: white" size="mini">翻译规则</el-button>-->
    </div>
  </div>
</template>
<script>

import ruleTreeNode from "./ruleTreeNode";

export default {
  name: "ruleTreeList",
  filters: {},
  props: [],
  components: {
    ruleTreeNode
  },
  data() {
    return {
      showSelf: false,
      ruleListInfo: {
        conditions: [
          {
            group: [
              {
                name: '',
                leftValue: '',
                operator: '',
                rightValue: '',
                interrupt: '',
                resultType: '',
                returnVal: '',
                children: []
              }
            ]
          }
        ]
      },
      selectors: {
        leftOptions: [],
        operatorOptions: [],
        interruptOptions: [],
        resultTypeOptions: [],
        metadataOptions: [],
      },
      ruleMode: undefined,
      toDisabled: true
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      vm.toDisabled = data.data.domainCode === ''
      vm.selectors = data.selectors
      vm.ruleListInfo = data.data.ruleListInfo
      vm.ruleMode = data.data.ruleMode
      vm.showSelf = true
    },
    needShowOr(conditions) {
      return conditions.length > 1
    },
    addNewRule() {
      let vm = this
      vm.ruleListInfo.conditions.push({
        group: [
          {
            name: '',
            leftValue: '',
            operator: '',
            rightValue: '',
            interrupt: '',
            resultType: '',
            returnVal: '',
            children: []
          }
        ]
      })
    }
  }
}
</script>
